<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        Rang茶商城</title>
    <!--  引入初始化样式-->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入本页面样式 -->
    <link rel="stylesheet" href="./css/detail.css">
    <!--  引入jquery文件-->
    <script src="./js/jquery.min.js"></script>
    <!-- 引入rem js文件 -->
    <script src="./js/flexible.js"></script>
    <!-- 引入公共js文件 -->
    <script src="./js/common.js"></script>
    <!-- 引入本页面js -->
    <script src="./js/detail.js"></script>
</head>

<body>
    <!-- 头部导航栏 -->
    <header>
        <div class="logo">
            <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvZjc0MTI0MDFiMDZjZjdjYmI4OTg5MTBjMTE2YzZlNzYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp"
                alt="">
        </div>
        <div class="headerbox">
            <ul>
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="about.html">关于</a>
                </li>
                <li>
                    <a href="tea.html">茶叶</a>
                </li>
                <li>
                    <a href="base.html">基地</a>
                </li>
                <li>
                    <a href="news.html">新闻</a>
                </li>
                <li>
                    <a href="relation.html">联系</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <img class="searchbtn" src="./images/搜索.svg" alt="">
            <a class="loginBtg" href="./login.html">
                <img src="./images/用户.svg" alt="">
            </a>
            <div class="carBtn">
                <img src="./images/_购物车.svg" alt="">
                <span>0</span>
                <ul class="carLis">
                </ul>
            </div>
            <div class="loginBox">
                <ul>
                    <li>
                        <a href="./data.html">
                            <img src="images/用户-角色-用户名-单人_jurassic.svg" alt="">
                            个人资料
                        </a>
                    </li>
                    <li>
                        <a href="data.html">
                            <img src="images/48银行卡.svg" alt="">
                            我的订单
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="quitBtn">
                            <img src="images/关机.svg" alt="">
                            安全退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 搜索框 -->
    <div class="searchbox">
        <div class="search">
            <h5>搜索</h5>
            <input type="text" placeholder="请输入关键词" name="" id="">
            <div>
                <button class="notarize">确认</button>
                <button class="cancel">取消</button>
            </div>
        </div>
    </div>
    <!-- 内容模块 -->
    <div class="content">
        <div class="conHead">
            <div class="m">
                <p>
                    茶叶<span>></span><a href="./tea.html">全部</a><span>></span><a href="./tea.html?type="
                        class="teaType"></a><span>></span>
                <p class="nowtea"></p>
                </p>
            </div>
        </div>
        <div class="r">
            <div class="prodBox">
                <!-- 头部内容盒子 -->
                <div class="topContent">
                    <div class="imgbox">
                        <div class="smallimgbox">
                            <img class="smallimg teaImg" src="" alt="">
                            <div class="cover"></div>
                        </div>
                        <div class="bigimgBox">
                            <img class="bigimg teaImg" src="" alt="">
                        </div>
                        <img src="" alt="" class="leastImg teaImg">
                    </div>
                    <div class="teaInfor">
                        <h3 class="teaName"></h3>
                        <div class="partition"></div>
                        <span class="money"></span>
                        <!-- 介绍 -->
                        <p class="introduce">
                            饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。
                        </p>
                        <!-- 编号 -->
                        <p class="number">
                            商品编号：<span class="numberText"></span>
                        </p>
                        <!-- 分类 -->
                        <div class="classify">
                            分类：<a href="./tea.html" class="classifyTea"></a>
                        </div>
                        <!-- 按钮盒子 -->
                        <div class="btnbox">
                            <button class="addCar">
                                加入购物车
                            </button>
                            <p class="minus" data-num="-1">-</p>
                            <input class="teaNum" type="number" value="1">
                            <p class="add" data-num="1">+</p>
                        </div>
                        <div class="collect">
                            <span>♡</span>收藏
                        </div>
                    </div>
                </div>
                <!-- 底部内容盒子 -->
                <div class="mainContent">
                    <h3>描述</h3>
                    <p>饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。但并不是喝得越多越好，也不是所有的人都适合喝茶。一般来说，每天1-2次，每次3-5克、400毫升的饮量是比较适当的。一般，人们说喝茶还指喝水。
                    </p>
                    <img src="./images/describe.webp" alt="">
                </div>
                <!-- 相关产品 -->
                <div class="correlation">
                    <h3>相关产品</h3>
                    <ul>
                        <li>
                            <a href="">
                                <img src="" alt="" class="corrImg">
                                <p class="corrName"></p>
                            </a>
                            <span class="corrMoney"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部导航栏 -->
    <footer>
        <div class="main">
            <div class="n">
                <div class="relation">
                    <h2>
                        联系</h2>
                    <p>
                        Contact</p>
                </div>
                <div class="aboutus">
                    <h5>
                        关于我们</h5>
                    <img src="./images/微信.svg" alt="">
                    <img src="./images/新浪微博.svg" alt="">
                </div>
                <div class="platform">
                    <h5>
                        起飞页自助建站平台</h5>
                    <p>
                        地址：苏州市建外SOHO东区2号楼</p>
                    <p>
                        邮编：100000</p>
                    <p>
                        电话：010-69557550</p>
                </div>
                <div class="yard">
                    <div>
                        <img src="./images/wx.webp" alt="">
                        <p>微信</p>
                    </div>
                    <div>
                        <img src="./images/wb.webp" alt="">
                        <p>微博</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="btntext">
            <div class="n">
                <p class="">
                    COPYRIGHT
                    (©)
                    2019
                    茶叶类网站
                    京ICP备41414141414-1号</p>
            </div>
        </div>
    </footer>
    <!-- 右下角电梯 -->
    <div class="elevator">
    </div>
</body>

</html>